<script setup>
import {
    AddBoxRound,
    SearchRound,
    AccessTimeRound,
    StickyNote2Outlined,
    EventNoteRound,
    StarBorderRound,
    ShoppingBagOutlined,
    DeleteOutlineRound,
} from "@vicons/material";
import { ref } from "vue";
import { renderIcon } from "@/utils/render-icon";
import { useRouter } from "vue-router";
import { toHref } from "@/utils/to_path";

// 路由对象
const router = useRouter();

let routePath = ref("");

watch(
    () => router.currentRoute.value,
    (newData) => {
        console.log(newData);
        routePath.value = newData.path;
    }
);

// 新增文件选项
const addFileOptions = [
    {
        label: "新增笔记",
        key: "add-note",
        icon: renderIcon(StickyNote2Outlined, { color: "#18a058", size: 22 }),
    },
    {
        label: "新增小记",
        key: "add-thing",
        icon: renderIcon(EventNoteRound, { color: "#2080f0", size: 22 }),
    },
];

// 应用菜单
const menus = ref([
    {
        label: "最近操作", // 弹出信息
        icon: AccessTimeRound, // 图标
        size: 24, // 图标大小,
        to: "/home", // 路由地址
    },
    {
        label: "笔记",
        icon: StickyNote2Outlined,
        size: 24,
        to: "/note",
    },
    {
        label: "小记",
        icon: EventNoteRound,
        size: 24,
        to: "/thing",
    },
    {
        label: "收藏",
        icon: StarBorderRound,
        size: 28,
        to: "/star",
    },
    {
        label: "商城",
        icon: ShoppingBagOutlined,
        size: 24,
        to: "/shop",
    },
    {
        label: "回收站",
        icon: DeleteOutlineRound,
        size: 28,
        to: "/rubbish-bin",
    },
]);

// 按钮是否高亮
const highlightMenuBtn = (to) => {
    if (!to) return null;
    // 判断当前路由地址是否为菜单按钮跳转地址为前缀
    return routePath.value.startsWith(to)
        ? {
              type: "success",
              tertiary: true,
          }
        : {
              quaternary: true,
          };
};
</script>

<template>
    <n-space
        vertical
        :size="16"
    >
        <!-- 新建文件 -->
        <n-dropdown
            size="large"
            :options="addFileOptions"
            placement="right-start"
        >
            <n-button
                text
                type="success"
            >
                <n-icon
                    :size="34"
                    :component="AddBoxRound"
                ></n-icon>
            </n-button>
        </n-dropdown>
        <!-- 搜索文件 -->
        <n-button text>
            <n-icon
                :size="26"
                :component="SearchRound"
            ></n-icon>
        </n-button>
        <!-- 分割线 -->
        <n-divider style="width: 34px;margin: 0 auto;"></n-divider>
        <!-- 应用菜单 -->
        <n-popover
            placement="right"
            v-for="m in menus"
            :key="m.label"
        >
            <template #trigger>
                <n-button
                    class="square"
                    v-bind="highlightMenuBtn(m.to)"
                    @click="toHref(m.to)"
                >
                    <n-icon
                        :size="m.size"
                        :component="m.icon"
                    ></n-icon>
                </n-button>
            </template>
            {{ m.label }}
        </n-popover>
    </n-space>
</template>

<style>
.n-button.square {
    width: 34px;
    padding: 0;
}
</style>